<template>
  <div style="padding: 70px 200px">
    <div style="margin-bottom: 10px">
        <el-input v-model="input" placeholder="搜索内容" class="input-with-select">
          <template #prepend>
            <el-select v-model="select" placeholder="搜索方式" style="width: 115px;">
              <el-option label="汉服名称" value="1" />
              <el-option label="店铺名称" value="2" />
              <el-option label="种类名称" value="3" />
            </el-select>
          </template>
          <template #append>
            <el-button :icon="Search" style="width: 50px;" @click="handleSearch"/>
          </template>
        </el-input>
    </div>
  </div>
  <div style="display: flex; flex-wrap: wrap;padding: 0 70px;margin-bottom: 20px">
    <el-card v-for="item in hanfus" style="width: 300px;margin-left: 30px;margin-top: 20px" @dblclick="openDetail(item)" shadow="hover">
      <template #header>
        <img v-if="item.hanfuImage" v-lazy="'http://localhost:8080/api/file/' + item.hanfuImage" style="width: 260px;height: 260px"/>
      </template>
      <h3>{{ item.hanfuName }}</h3>
      <div style="display: flex">
        <h5 style="color: red">￥{{ item.hanfuPrice }}</h5>
        <h5 style="color: gainsboro;margin-left: 20px">库存：{{ item.hanfuInventory }}</h5>
      </div>
    </el-card>
  </div>
  <el-backtop style="--el-backtop-hover-bg-color: rgb(245,108,108);--el-backtop-text-color: red" :right="100" :bottom="100" />
</template>

<script setup>
import {Search} from '@element-plus/icons-vue';
import {userApi} from "../../api/app";
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";

const hanfus = ref();
const input = ref();
const select = ref('1');

const getData = () => {
  userApi.getAllHanfu().then(response => {
    hanfus.value = response;
  })
}

const handleSearch = () => {
  if(input.value.length > 0) {
    if(select.value === '1') {
      userApi.searchByHanfu({
        hanfuName: input.value
      }).then(response => {
        hanfus.value = response;
      })
    } else if(select.value === '2') {
      userApi.searchByShop({
        hanfuShopName: input.value
      }).then(response => {
        hanfus.value = response;
      })
    } else {
      userApi.searchByType({
        hanfuTypeName: input.value
      }).then(response => {
        hanfus.value = response;
      })
    }
  } else getData();
}

onMounted(() => {
  getData();
})

const router = useRouter();
// 跳转到商品详情页
const openDetail = (message) => {
  router.push({ path: '/main/productDetail',query: message });
}
</script>

<style scoped>

</style>